<template>
	<view>
		<u-navbar :border-bottom='false' back-icon-size='48' title="我的佣金"></u-navbar>
		<view class="topBox">
			<view class="title">
				累计佣金
			</view>
			<view class="number">
				<text style="font-size: 28rpx;margin-right: 4rpx;">¥</text>{{commission.total_commission}}
			</view>
			<view class="todetail">
				<text style="margin-right: 4rpx;" @click="navTo('../bill/bill')">查看明细</text>
				<u-icon name="arrow-right" color="#FFFFFF" size="24"></u-icon>
			</view>
		</view>
		<view class="container">
			<view class="content">
				<u-cell-group :border='false'>
					<u-cell-item :border-top='true' :arrow='false' :value='commission.Withdrawal_amount' :value-style='valueStyle'
					 title="已提现">
					</u-cell-item>
					<u-cell-item :border-top='true' :arrow='false' :value='commission.commission' :value-style='valueStyle' title="可提现">
					</u-cell-item>
					<u-cell-item :border-top='true' :arrow='false' :value='commission.Withdrawal_examine' :value-style='valueStyle'
					 title="审核中">
					</u-cell-item>
				</u-cell-group>
			</view>
		</view>
		<view class="tip">
			<view class="title">
				用户须知
			</view>
			<view class="text">
				每周三提现，每笔提现将收取6% 的提现服务费。
			</view>
		</view>
		<view class="btn" @click="navTo('../yjWithdraw')">
			我要提现
		</view>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				valueStyle: {
					'color': "#333333",
					'font-size': '28rpx'
				},
				commission: {}
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			getData() {
				myRequest.mycommission().then(res => {
					this.commission = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topBox {
		width: 710rpx;
		height: 316rpx;
		margin: 20rpx auto 0;
		@include bgi('../../../../static/imgs/wodeyjbgj.png');
		padding-left: 28rpx;
		padding-top: 44rpx;

		.title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.number {
			width: fit-content;
			height: 54rpx;
			margin-top: 16rpx;
			font-size: 48rpx;
			font-family: Arial;
			font-weight: 400;
			line-height: 54rpx;
			color: #FFFFFF;
			margin: 40rpx auto 0;
		}

		.todetail {
			width: fit-content;
			height: 24rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin: 44rpx auto 0;
		}
	}

	.container {
		padding: 0 20rpx;
		margin-top: 40rpx;

		.content {
			margin-top: 20rpx;
			width: 100%;
			height: auto;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			overflow: hidden;

			.icons {
				width: 60rpx;
				height: 60rpx;
			}

			.title {
				display: flex;
				flex-direction: column;
				justify-content: center;

				.type {
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333333;
				}

				.date {
					margin-top: 4rpx;
					font-size: 24rpx;
					font-family: Arial;
					font-weight: 400;
					color: #999999;
				}
			}
		}
	}

	.tip {
		padding-top: 40rpx;
		padding-left: 38rpx;

		.title {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #333333;
		}

		.text {
			margin-top: 10rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}

	.btn {
		width: 670rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: linear-gradient(180deg, #FB8703 0%, #F7270C 100%);
		border-radius: 16rpx;
		margin: 150rpx auto 0;
		font-size: 36rpx;
		font-family: PingFangSC-Medium;
		color: #FFFFFF;
	}

	/deep/ .u-cell_title {
		line-height: 34rpx !important;
	}
</style>
